<script setup lang="ts">
import { Delete, Edit } from '@element-plus/icons-vue'
import type { FormInstance } from 'element-plus'
import {
  defaultDeviceForm,
  deviceFormRules,
} from './index'
import { PAGING } from '@/constant'
// ------------------use------------------
// #region
const { globalProperties } = useCurrentInstance()
const { vLoading, withLoading } = useDefineLoading()
const [tableData, setTableData] = useState<any[]>([])
const [isEditDialog, setIsEditDialog]
  = useState<boolean>(false)
const [isAddDialog, setIsAddDialog]
  = useState<boolean>(false)
const [deviceForm, setDeviceForm] = useState<any>({
  ...defaultDeviceForm,
})
const [total, setTotal] = useState<number>(0)
// #endregion
// ------------------静态变量------------------
// #region

// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region
const pagingParams = ref<any>({
  ...PAGING.PARAMS,
})
const addFormRef = ref<FormInstance>()
const editFormRef = ref<FormInstance>()
// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region

// #endregion
// ------------------生命周期------------------
// #region
// 企业端获取数据
onMounted(() => {
  init()
})
// #endregion
// ------------------内置方法---------------------
// #region
// #endregion
// ------------------方法---------------------
// #region
function init() {
  getTableData()
}
async function getTableData() {
  await withLoading(sleep)(1000)
  setTotal(20)
  setTableData(Array.from({ length: 20 }).fill(0))
}
async function showAddDialoog() {
  editFormRef.value?.resetFields?.()
  setDeviceForm({
    ...defaultDeviceForm,
  })
  await nextTick()
  setIsAddDialog(true)
}
async function showEditDialoog() {
  editFormRef.value?.resetFields?.()
  setDeviceForm({
    ...defaultDeviceForm,
  })
  await nextTick()
  setIsEditDialog(true)
}
async function deleteData() {
  try {
    await globalProperties.$confirm(
      '该操作将永久删除该数据，确定删除？',
      '警告',
      {
        type: 'warning',
      },
    )
    getTableData()
    globalProperties.$message.success('操作成功！')
  }
  catch (error) {}
}
// #endregion
</script>

<template>
  <div
    class="padding-sm flex-direction box-border flex gap-sm container"
  >
    <div class="flex-incompressible">
      <el-button
        plain
        type="primary"
        @click="showAddDialoog"
      >
        新增
      </el-button>
    </div>
    <el-table
      v-loading
      :data="tableData"
      class="flex-fillRemaining"
    >
      <el-table-column fixed label="主要能耗设备">
        <el-table-column
          type="index"
          label="序号"
          width="80"
        />
        <el-table-column label="高耗能设备" width="200">
          <template #default="{ row }">
            {{ row.equipmentName ?? '风机' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="equipmentType"
          label="设备类型"
        >
          <template #default="{ row }">
            {{ row.equipmentType ?? '' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="equipmentType"
          label="能耗类型"
        >
          <template #default="{ row }">
            {{ row.equipmentType ?? '电' }}
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="设备概况">
        <el-table-column prop="orderNum" label="型号">
          <template #default="{ row }">
            {{ row.orderNum ?? '' }}
          </template>
        </el-table-column>
        <el-table-column prop="model" label="功率/容量">
          <template #default="{ row }">
            {{ row.model ?? '' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="keyTechnicalData"
          label="主要技术参数"
        >
          <template #default="{ row }">
            {{ row.keyTechnicalData ?? '' }}
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="设备运行状况">
        <el-table-column prop="loadRate" label="负载率(%)">
          12
        </el-table-column>
        <el-table-column prop="runTime" label="运行时间(h)">
          20
        </el-table-column>
        <el-table-column prop="repairNum" label="维修次数">
          2
        </el-table-column>
        <el-table-column label="状态">
          <template #default="{ row }">
            <el-tag v-if="row.status === 0" type="success">
              正常
            </el-tag>
            <el-tag v-else type="danger">
              故障
            </el-tag>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="淘汰更新概况">
        <el-table-column
          prop="isEliminate"
          label="是否属于淘设备"
        >
          否
        </el-table-column>
        <el-table-column
          prop="planUpdateTime"
          label="计划更新时问"
        >
          <template #default="{ row }">
            {{ row.planUpdateTime ?? '' }}
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="监测情况">
        <el-table-column prop="project" label="项目">
          <template #default="{ row }">
            {{ row.project ?? '' }}
          </template>
        </el-table-column>
        <el-table-column prop="index" label="指标">
          <template #default="{ row }">
            {{ row.index ?? '' }}
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="notes" label="备注">
        <template #default="{ row }">
          {{ row.notes ?? '' }}
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100"
      >
        <el-tooltip content="编辑" placement="top">
          <el-button
            link
            type="primary"
            :icon="Edit"
            @click="showEditDialoog()"
          />
        </el-tooltip>
        <el-divider direction="vertical" />
        <el-tooltip content="删除" placement="top">
          <el-button
            link
            type="danger"
            :icon="Delete"
            @click="deleteData()"
          />
        </el-tooltip>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="pagingParams.pageNumber"
      v-model:page-size="pagingParams.pageSize"
      hide-on-single-page
      :page-sizes="PAGING.PAGE_SIZES"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      background
      class="flex-incompressible justify-end"
      @current-change="getTableData"
      @size-change="getTableData"
    />

    <!-- 编辑弹窗 -->
    <el-dialog
      v-model="isEditDialog"
      title="编辑"
      append-to-body
      width="600"
    >
      <el-form
        ref="editFormRef"
        label-width="120px"
        label-position="right"
        :model="deviceForm"
        :rules="deviceFormRules"
        class="flex-direction align-center flex"
      >
        <el-form-item
          prop="equipmentName"
          label="设备名称"
          class="width-fill"
        >
          <el-input
            v-model="deviceForm.equipmentName"
            placeholder="请输入设备名称"
          />
        </el-form-item>
        <el-form-item
          prop="equipmentType"
          label="设备类型"
          class="width-fill"
        >
          <el-input
            v-model="deviceForm.equipmentType"
            placeholder="请输入设备类型"
          />
        </el-form-item>
        <el-form-item
          prop="model"
          label="设备型号"
          class="width-fill"
        >
          <el-input
            v-model="deviceForm.model"
            placeholder="请输入设备型号"
          />
        </el-form-item>
        <el-form-item
          prop="power"
          label="功率/容量"
          class="width-fill"
        >
          <el-input
            v-model.number="deviceForm.power"
            placeholder="请输入功率/容量"
          />
        </el-form-item>
        <el-form-item
          prop="keyTechnicalData"
          label="主要技术参数"
          class="width-fill"
        >
          <el-input
            v-model="deviceForm.keyTechnicalData"
            placeholder="请输入主要技术参数"
          />
        </el-form-item>
        <el-form-item
          prop="loadRate"
          label="负载率(%)"
          class="width-fill"
        >
          <el-input
            v-model.number="deviceForm.loadRate"
            placeholder="请输入负载率"
          />
        </el-form-item>
        <el-form-item
          prop="runTime"
          label="运行时间(h)"
          class="width-fill"
        >
          <el-input
            v-model.number="deviceForm.runTime"
            placeholder="请输入运行时间"
          />
        </el-form-item>
        <el-form-item
          prop="status"
          label="设备状态"
          class="width-fill"
        >
          <el-select
            v-model="deviceForm.status"
            placeholder="请选择状态"
            class="width-fill"
          >
            <el-option label="正常" :value="0" />
            <el-option label="故障" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="isEliminate"
          label="淘汰设备"
          class="width-fill"
        >
          <el-select
            v-model="deviceForm.isEliminate"
            placeholder="请选择状态"
            class="width-fill"
          >
            <el-option label="否" :value="0" />
            <el-option label="是" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="planUpdateTime"
          label="计划更新时间"
          class="width-fill"
        >
          <el-date-picker
            v-model="deviceForm.planUpdateTime"
            type="date"
            value-format="YYYY/MM/DD"
            placeholder="请选择时间"
          />
        </el-form-item>
        <el-form-item
          prop="project"
          label="项目"
          class="width-fill"
        >
          <el-input
            v-model="deviceForm.project"
            placeholder="请输入项目"
          />
        </el-form-item>
        <el-form-item
          prop="index"
          label="指标"
          class="width-fill"
        >
          <el-input
            v-model="deviceForm.index"
            placeholder="请输入指标"
          />
        </el-form-item>
        <el-form-item
          prop="notes"
          label="备注"
          class="width-fill"
        >
          <el-input
            v-model="deviceForm.notes"
            :rows="2"
            type="textarea"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="setIsEditDialog(false)">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="setIsEditDialog(false)"
        >
          确定
        </el-button>
      </template>
    </el-dialog>
    <!-- 新增弹窗 -->
    <el-dialog
      v-model="isAddDialog"
      title="新增"
      append-to-body
      width="600"
    >
      <el-form
        ref="addFormRef"
        label-width="100px"
        label-position="right"
        :model="deviceForm"
        :rules="deviceFormRules"
        class="flex-direction align-center flex"
      >
        <el-form-item
          prop="equipmentName"
          label="设备名称"
          class="width-fill"
        >
          <el-input
            v-model="deviceForm.equipmentName"
            placeholder="请输入设备名称"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="setIsAddDialog(false)">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="setIsAddDialog(false)"
        >
          确定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.flex {
  display: flex;
}
.flex-direction {
  flex-direction: column;
}
.width-fill {
  width: 100%;
}
.height-fill {
  height: 100%;
}
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
